<template>
    <div class="userList">
        <div class="header">
            <el-row>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>供应商列表</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="2">
                    <el-button type="success" size="mini" @click="addUser">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                height="69vh"
                :data="listMaterialClassify"
                stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="supplierName"
                    label="供应商"
            >
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="电话号码"
            >
            </el-table-column>
            <el-table-column
                    prop="backCardName"
                    label="银行"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
            >
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template slot="header">
                    <el-input
                            @input="getSearch"
                            v-model="search"
                            size="mini"
                            prefix-icon="el-icon-search"
                            placeholder="请输入项目"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="upd(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                :page-size="10"
                :pager-count="11"
                @current-change="pageNum"
                layout="prev, pager, next"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
import {getSupplier} from "../../network/supplier";

export default {
        name: "index",
        data() {
            return {
                search: '',

                totalSize: 0,
                listMaterialClassify: [],
                dataPage: {
                    pageNum: 1,
                    pageSize:10
                }

            }
        },
        created() {
            this.getSupplier()
        },
        methods: {
            addUser(){
              this.$router.push({path:'/addSupplier'})
            },
            pageNum(num) {
                this.dataPage.pageNum = num
                this.getSupplier()
            },
            getSearch(){

                this.dataPage.pageNum=1
                this.dataPage.searchVal=this.search
                this.getSupplier()
            },
            //供应商列表
            async getSupplier() {
                let status = await getSupplier(this.dataPage)
                if (status.code) {
                    this.listMaterialClassify = status.data.content
                    this.totalSize = status.data.totalSize

                } else {
                    this.$error(status.msg)
                }
            },
            upd() {
                this.$message.error('该功能暂未开放！')
                return
            },
            // del(row) {
            //     this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(async () => {
            //         let data = {
            //             id: row.projectCode
            //         }
            //         let status = await delProjectName(data)
            //         if (status.code == 200) {
            //             this.$success('成功删除!')
            //             this.getProjectList()
            //         } else {
            //             this.$success(status.msg)
            //         }
            //
            //
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消删除'
            //         });
            //     });
            //
            // },

        }
    }
</script>

<style scoped lang="sass">
    .header
        margin-bottom: 20px

        .el-select
            width: 100%

        ::v-deep .el-dialog
            width: 30%
            border-radius: 5px

</style>